<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{width:100%;height:100%}
    p{margin-left:5px; font-size:14px;}
    .out{
      overflow: hidden;
      padding:0 !important;
      background: white !important;
      border:none !important;
    }
    .out .ceshi{
      float: left;
      margin-right:5px;
      padding:10px;
    }
    .out .active{
      color:white;
      background: #B4282D;
    }
    .out .ceshi2{
      float: left;
      padding:10px;
    }
    .out2{
      font-size: 14px;
      background: rgba(0,0,0,0.6);
      color:white;
      padding: 9px 18px;
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4kKG5Q7QjYMfuGej88OcMZFhIGn9CCme"></script>
  <title>添加自定义控件</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");

  var geoc = new BMap.Geocoder();
  var geolocation = new BMap.Geolocation();
  // var p1 = new BMap.Point(116.301934,39.977552);
  // 路线开始处的经纬度
  var a = "";
  //路线结束处的经纬度
  var b = new BMap.Point(116.508328,39.919141);
  var x = 0,y = 0;
  var cont = "六圈路";
  geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
      var mk = new BMap.Marker(r.point);
      x=r.point.lng;
      y=r.point.lat;
      a = new BMap.Point(x,y);
      var point = new BMap.Point(x,y);
      var opts = {
        position : point,    // 指定文本标注所在的地理位置
        offset   : new BMap.Size(-100, -70)

      }
      geoc.getLocation(point, function(rs){
        // console.log(rs.surroundingPois+""+rs.surroundingPois[0].title);
        // alert(rs.address+""+rs.surroundingPois[0].title);
        // var cont=rs.address+""+rs.surroundingPois[0].title;
        // cont=rs.address+""+rs.surroundingPois[0].title;
        cont = rs.address;
        // 创建文本标注对象
        var label = new BMap.Label(cont,opts);
        label.setStyle({
          color : "black",
          fontSize : "16px",
          lineHeight : "20px",
          fontFamily:"微软雅黑",
          padding:"10px",
          border:"1px solid white"
        });
        map.addOverlay(label);
        map.addOverlay(mk);
        map.panTo(r.point);
        map.centerAndZoom(r.point,14);
      });

    }
    else {
      alert('failed'+this.getStatus());
    }
  });



  // 步行路线
  // 定义一个控件类,即function
  function Walk(){
    // 默认停靠位置和偏移量
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
    this.defaultOffset = new BMap.Size(10, 10);
  }
  // var a="安翔里小区",b="丰台科技园";
  // 通过JavaScript的prototype属性继承于BMap.Control
  Walk.prototype = new BMap.Control();
  var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
  //驾车
  var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
  // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
  // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
  Walk.prototype.initialize = function(map){
    // 创建一个DOM元素
    var div1 = document.createElement("div");
    div1.setAttribute("class","out");
    var odiv = document.createElement("div");
    odiv.setAttribute("class","ceshi");
    odiv.classList.add("active");
    odiv.innerHTML="步行路线";
    var qdiv = document.createElement("div");
    qdiv.setAttribute("class","ceshi2");
    qdiv.innerHTML = "驾车路线"
    // 添加文字说明
    div1.appendChild(odiv);
    div1.appendChild(qdiv);
    // 设置样式
    div1.style.cursor = "pointer";
    div1.style.border = "1px solid gray";
    div1.style.backgroundColor = "white";
    div1.style.fontSize="14px";
    div1.style.padding="2px 4px";
    odiv.onclick = function(e){
      walking.search(a, b);
      odiv.classList.add("active");
      qdiv.classList.remove("active");
    }
    qdiv.onclick = function() {
      odiv.classList.remove("active");
      qdiv.classList.add("active");
      search(a,b,routePolicy[0]);
      function search(a,b,route){
        var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route});
        driving.search(a,b);
      }
    }
    // 添加DOM元素到地图中
    map.getContainer().appendChild(div1);
    // 将DOM元素返回
    return div1;
  }
  // 创建控件
  var myWalk = new Walk();
  // 添加到地图当中
  map.addControl(myWalk);

  //  唤起地图app
  function call(){
    // 默认停靠位置和偏移量
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
    this.defaultOffset = new BMap.Size(200, 10);
  }
  call.prototype = new BMap.Control();
  call.prototype.initialize = function(map){
    var div2 = document.createElement("div");
    div2.setAttribute("class","out2");
    div2.innerHTML="导航";
    map.getContainer().appendChild(div2);
    return div2;
  }
  var myCall = new call();
  map.addControl(myCall);


</script>
